import { Card } from 'antd';

// 模拟搜索排行数据
const searchRankingData = [
  { id: 1, 关键词: '上海', 搜索量: 100, 搜索用户数: 50 },
  { id: 2, 关键词: '北京', 搜索量: 100, 搜索用户数: 90 },
  { id: 3, 关键词: '上海', 搜索量: 100, 搜索用户数: 90 },
  { id: 4, 关键词: '北京', 搜索量: 100, 搜索用户数: 90 },
];

const SearchRanking: React.FC = () => {
  return (
    <div className="ranking-container">
      <table className="ranking-table" style={{ width: '100%', borderCollapse: 'collapse' }}>
        <thead>
          <tr style={{ borderBottom: '1px solid #f0f0f0' }}>
            <th style={{ fontSize: 12, padding: '6px 8px', textAlign: 'left', fontWeight: 'bold' }}>排名</th>
            <th style={{ fontSize: 12, padding: '6px 8px', textAlign: 'left', fontWeight: 'bold' }}>关键词</th>
            <th style={{ fontSize: 12, padding: '6px 8px', textAlign: 'left', fontWeight: 'bold' }}>总搜索量</th>
            <th style={{ fontSize: 12, padding: '6px 8px', textAlign: 'left', fontWeight: 'bold' }}>搜索用户数</th>
          </tr>
        </thead>
        <tbody>
          {searchRankingData.map((item, index) => (
            <tr key={item.id} style={{ borderBottom: '1px solid #f0f0f0' }}>
              <td style={{ fontSize: 12, padding: '6px 8px' }}>{index + 1}</td>
              <td style={{ fontSize: 12, padding: '6px 8px' }}>{item.关键词}</td>
              <td style={{ fontSize: 12, padding: '6px 8px' }}>{item.搜索量}</td>
              <td style={{ fontSize: 12, padding: '6px 8px' }}>{item.搜索用户数}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default SearchRanking;